<template>
  <div>
    <el-dialog
      title="修改密码"
      :visible.sync="changePasswordDialogVisible"
      width="35%"
      :modal="false"
      :top="'15%'"
      @close="handleChangePasswordDialogClose"
    >
      <el-form
        ref="changePasswordForm"
        :model="changePasswordForm"
        label-width="80px"
      >
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="changePasswordForm.newPassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="changePasswordForm.confirmPassword"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleChangePasswordDialogClose">取消</el-button>
        <el-button type="primary" @click="submitChangePasswordForm"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["number", "updateById"],
  data() {
    return {
      changePasswordDialogVisible: false,
      changePasswordForm: {
        newPassword: "",
        confirmPassword: "",
      },
      phonenumber: "",
    };
  },
  methods: {
    showChangePasswordDialog() {
      this.changePasswordDialogVisible = true;
    },
    handleChangePasswordDialogClose() {
      this.changePasswordDialogVisible = false;
      // 清空表单数据
      this.$refs.changePasswordForm.resetFields();
    },
    submitChangePasswordForm() {
      //验证格式
      if (!this.verifyFormat()) {
        return;
      }

      //根据id来更新密码
      if (this.updateById) {
        this.updatePassWordByUserId();
        return;
      }

      //更新密码
      this.$request.postHttp({
        url: "/user/updatePassWordByPhoneNumber",
        data: {
          phonenumber: localStorage.getItem("phonenumber"),
          password: this.changePasswordForm.newPassword,
        },
        success: (data) => {
          if (data.isUpdate) {
            this.$message({
              message: "修改成功！",
              type: "success",
            });
            this.handleChangePasswordDialogClose();
          } else {
            this.$message({
              message: "修改失败！",
              type: "error",
            });
          }
        },
        error: (error) => {},
      });
    },
    //根据用户id更新密码
    updatePassWordByUserId() {
      this.$request.postHttp({
        url: "/user/updateUserByUserId",
        data: {
          userid: localStorage.getItem("userId"),
          password: this.changePasswordForm.newPassword,
        },
        success: (data) => {
          if (data.isUpdate) {
            this.$message({
              message: "密码修改成功！",
              type: "success",
            });
            this.changePasswordDialogVisible = false;
            return;
          }
          this.$message({
            message: "密码修改失败",
            type: "error",
          });
        },
        error: (error) => {},
      });
    },
    verifyFormat() {
      //验证密码格式
      const verifyPassWord = /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9]{6,15}$/;
      if (
        this.changePasswordForm.newPassword !=
        this.changePasswordForm.confirmPassword
      ) {
        this.$message({
          message: "两次输入的密码不一致",
          type: "error",
        });
        return false;
      }
      if (
        !(
          verifyPassWord.test(this.changePasswordForm.newPassword) &&
          verifyPassWord.test(this.changePasswordForm.confirmPassword)
        )
      ) {
        this.$message({
          message: "密码格式有误，密码格式为6-15位英文数字组合",
          type: "error",
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped>
</style>
